<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Sys Stats</title>
  <style>
    ::selection {
      background-color: #79ffe1;
      color: #000;
    }

    ::-moz-selection {
      background-color: #79ffe1;
      color: #000;
    }

    body {
      margin: 0;
      background: #fff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
        'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      display: flex;
      padding: 30px;
      max-width: 920px;
      height: 100vh;
      box-sizing: border-box;
      flex-direction: column;
    }

    header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    header h1 {
      font-size: 24px;
      margin: 0;
    }

    main {
      display: flex;
      flex: 1;
      overflow-y: auto;
      margin: 20px 0;
    }

    #logs {
      margin: 0;
      padding: 0;
      width: 100%;
    }

    ul li {
      padding: 10px;
    }

    ul li.right {
      text-align: right;
    }

    form {
      display: flex;
      justify-content: space-between;
    }

    form textarea {
      flex: 1;
      margin-right: 20px;
    }
  </style>
</head>

<body>
  <header>
    <h1><i>Sys Stats</i></h1>
  </header>
  <main>
    <ul id="logs"></ul>
  </main>
</body>
<script>
  let logs = document.getElementById('logs')

  const addLog = (e) => {
    const li = document.createElement('li')
    li.innerText = e.data
    logs.appendChild(li)
  }

  let eventSource = new EventSource('stats')
  eventSource.onmessage = addLog
</script>

</html>